@navFontFamily: 'Open Sans', sans-serif;
@globalBackgroundColor: #fafafa;
@fastTransition: 0.2s ease;
@slowTransition: 0.4s ease;
@fontSizeBase: 14px;
@lineHeightBase: 32px;
@contentHeight: 100vh;
@footerHeight: 55vh;
@footerColTitleFontSize: 15px;
@footerColItemFontSize: 14px;
@commonUserTagBackground: #666666;
@insiderTagBackground: #ff6666;
@maxZIndex: 150;

/*
  字体引入
 */

/* cyrillic-ext */
@font-face {
  font-family: "Montserrat Alternates";
  font-style: normal;
  font-weight: 400;
  src:
    url("https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU055qfQOJ0.woff2")
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: "Montserrat Alternates";
  font-style: normal;
  font-weight: 400;
  src:
    url("https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU0576fQOJ0.woff2")
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: "Montserrat Alternates";
  font-style: normal;
  font-weight: 400;
  src:
    url("https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU055KfQOJ0.woff2")
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Montserrat Alternates";
  font-style: normal;
  font-weight: 400;
  src:
    url("https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU055afQOJ0.woff2")
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Montserrat Alternates";
  font-style: normal;
  font-weight: 400;
  src:
    url("https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU0566fQ.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

a {
  color: inherit;
  text-decoration: none;
  pointer-events: all;
  cursor: pointer;
}

html {
  overflow-y: auto;
  background: @globalBackgroundColor;
}

.basic-layout-nav-outer {
  position: relative;
  width: 100vw;
  padding-top: .8rem;
  margin: 0 auto;
  background: #fff;
}

.basic-layout-nav {
  position: relative;
  display: flex;
  //width: 62vw;
  max-width: 75rem;
  margin: 0 auto;
  flex-direction: row;
}

.nav-icon {
  width: @lineHeightBase;
  height: @lineHeightBase;
}

.basic-user-info-wrapper {
  display: inline-flex;
  min-height: @lineHeightBase;
  font-size: @fontSizeBase;
  background-color: #fff;
  align-items: center;
}

.s-avatar {
  width: @lineHeightBase;
  height: @lineHeightBase;
  border-radius: 50%;
}

.s-username {
  margin: 0 .6rem;
  font-family: @navFontFamily;
  font-size: @fontSizeBase;
}

.identity-tag-wrapper {
  display: inline-flex;
  align-items: center;
  //height: 23px;
  background: #666;
  border-radius: 15px;
}

.identity-tag {
  padding: 3px 10px;
  //margin-bottom: 20px;
  font-family: @navFontFamily;
  font-size: 12px;
  font-weight: bolder;
  color: #fff;
}

.basic-layout-sub-menu-outer {
  position: sticky;
  top: 0;
  z-index: @maxZIndex;
  display: flex;
  height: 51px;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
}

.--tabs {
  display: flex;
  width: 75rem;
  height: auto;
  padding: .3rem 0;
  margin: 0 auto;
  transition: .5s;
  transform: translateX(-32px);
}

.--tab {
  --underline-color: #2ecc71;
  --underline-size: 5px;

  position: relative;
  padding: .9rem 20px 35px;
  overflow: hidden;
  font-family: system-ui, sans-serif;
  line-height: 1;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px 10px 0 0;
  transition: @fastTransition;

  --animation-time: 200ms;
}

.--tab::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: var(--underline-size, 2px);
  background-color: var(--underline-color, currentColor);
  content: "";
  opacity: 0;
  transform: translateX(100%);
  transition: transform ease var(--animation-time, 200ms), opacity ease 0ms var(--animation-time, 200ms);
}

.--tab:hover {
  color: #000;
  background: #eaeaea;
}

.--tabs:not(:hover) .--tab:not(.--is-active):first-child::after,
.--tab:hover ~ .--tab:not(.--is-active)::after {
  transform: translateX(-100%);
}

.--tab:not(.--is-active)::after {
  transform: translateY(100%);
}

.--tabs:hover .--tab:hover::after,
.--tabs:hover .--tab:hover::after {
  transition-delay: 0ms, 0ms;
}

.--tab.--is-active::after,
.--tab:hover::after {
  opacity: 1;
  transform: translateX(0%);
}

.basic-layout-content {
  min-height: @contentHeight;
}

.account-option-svg {
  padding: 5px;
  margin-left: .6rem;
  transition: @slowTransition;
  border-radius: 5px;
}

.account-option-svg:hover {
  background: #eaeaea;
  border-radius: 10px;
}

.basic-link-nav {
  position: absolute;
  right: 0;
  display: inline-flex;
  min-height: @lineHeightBase;
  font-size: @fontSizeBase;
  background-color: #fff;
  align-items: center;
}

.link-nav {
  padding: 5px 10px;
  margin: 0 .6rem;
  font-family: @navFontFamily;
  font-size: @fontSizeBase;
  pointer-events: all;
  cursor: pointer;
  border-radius: 10px;
  transition: .3s ease-in-out;
}

.link-nav:hover {
  color: white;
  background: rgb(0 0 0 / 90%);
  border-radius: 24px;
}

.basic-layout-footer-outer {
  //margin: 0 auto;
  width: 100vw;
  height: auto;
  padding: 3rem 1rem;
  background: #fff;
  border-top: 1px solid #eaeaea;
}

.basic-layout-footer {
  position: relative;
  display: flex;
  height: 100%;
  max-width: 75rem;
  margin: 0 auto;
  flex-direction: row;
  justify-content: space-between;
}

.basic-footer-col {
  width: 15rem;
  height: 100%;
}

.l-icon {
  width: @lineHeightBase;
  height: @lineHeightBase;
}

.footer-icon-wrapper {
  display: inline-flex;
  align-items: baseline;
}

.footer-app-name {
  font-family: "Comic Sans MS", monospace;
  font-size: 17px;
  font-weight: bold;
}

.basic-footer-col-title {
  margin-bottom: 1.5rem;
  font-size: @footerColTitleFontSize;
}

.basic-footer-col-item:hover {
  color: #4fbe9f;
}

.basic-footer-col-item {
  margin: 1.2rem 0;
  font-size: @footerColItemFontSize;
  color: #646464;
  transition: .2s ease-in-out;
}

.multi-func-bar {
  position: relative;
  align-items: center;
  display: flex;
  height: 100%;
  max-width: 75rem;
  padding: 2rem 0 0;
  margin: 0 auto;
  font-size: @fontSizeBase;
  color: #666;
  flex-direction: row;
  justify-content: space-between;
}

.basic-footer-repo {
  width: @lineHeightBase;
  height: @lineHeightBase;
}

.basic-footer-divide {
  width: @lineHeightBase - 4px;
  height: @lineHeightBase - 4px;
}

.basic-footer-repo-wrapper {
  display: flex;
  align-items: center;
}

.certificate-sn {
  display: inline-flex;
  align-items: center;
  font-size: @fontSizeBase;
  color: #666;
}

.basic-footer-beian-svg {
  display: inline-flex;
  width: @lineHeightBase - 4px;
  height: @lineHeightBase - 4px;
  padding-right: 3px;
}

.basic-footer-service-status {
  display: inline-flex;
  align-items: center;
}

div .--slogan {
  margin-top: 1.1rem;
  margin-left: .3rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
}

div .--slogan p {
  width: 110%;
  padding: 3px 0;
  filter: brightness(0);
  animation: color-cycle 10s cubic-bezier(.4, 0, .2, 1) infinite;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--start-color), var(--end-color));
}

div .--slogan p:nth-child(2) {
  animation-delay: 3.33s;
}

div .--slogan p:nth-child(3) {
  animation-delay: 6.66s;
}

@media (max-width: 720px) {
  .--slogan {
    font-size: 23vw;
  }
}

@keyframes color-cycle {
  0%,
  55% {
    filter: brightness(0);
  }

  11%,
  33% {
    filter: none;
  }
}

#app-name {
  fill: transparent;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 1rem;
  letter-spacing: .1rem;
  stroke-dasharray: 650 650;
  stroke-dashoffset: 650;
  stroke: #09816c;
  stroke-width: 3px;
  transition: stroke-dashoffset 15s linear;
}

#app-name.trace {
  stroke-dashoffset: 0;
}

.copyright-text {
  display: inline-flex;
  align-content: center;
}

.basic-layout-content-title {
  padding: 48px 0;
  font-family:
    "Helvetica Neue",
    Helvetica,
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "微软雅黑",
    Arial,
    sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: .3rem;
  border-bottom: 1px solid #eaeaea;
}

.basic-layout-content-title-inner {
  position: relative;
  display: flex;
  max-width: 75rem;
  margin: 0 auto;
  //background: grey;
  flex-direction: row;
}

.basic-layout-content-main {
  position: relative;
  display: flex;
  height: auto;
  max-width: 75rem;
  margin: 48px auto;
  flex-direction: row;
}

.basic-layout-sidebar-wrapper {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-start;
  align-items: stretch;
  width: 18rem;
  flex-shrink: 0;
  flex-direction: column;
}

.basic-layout-content-router-view {
  width: 100%;
  //height: 150vh;
  //background: coral;
}

.basic-layout-sidebar-item {
  padding: 12px;
  margin: 0 20px 0 -12px;
  font-family:
    "Helvetica Neue",
    Helvetica,
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "微软雅黑",
    Arial,
    sans-serif;
  font-size: @fontSizeBase;
  border-radius: 10px;
  transition: .3s ease-in-out;
}

.basic-layout-sidebar-item:hover {
  background: #eaeaea;
}

.basic-layout-sidebar-inner {
  position: sticky;
  top: 64px;
  z-index: 101;
  display: block;
}

.active-side-bar-item {
  margin: 5px inherit;
  font-size: @fontSizeBase + 4px;
  font-weight: bold;
}

.section-process {
  --gradient-color-1: #ef008f;
  --gradient-color-2: #6ec3f4;
  --gradient-color-3: #7038ff;
  --gradient-color-4: #c9c9c9;

  .process-steps-container {
    .process-step-container {
      .process-step-title-container {
        position: relative;
        margin-top: -16px; //To adjust for the line-height
        .process-step-title,
        .process-step-title-overlay {
          margin: .8rem 0;
          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
          font-size: 17px;
          font-weight: 900;
          line-height: 1.2em;
          letter-spacing: -1px;
        }

        .process-step-title-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: auto;
          height: 100%;
          padding-right: 30px;
          margin: 0;
          opacity: 1;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }

      &.process-step-1 {
        .process-step-title-overlay {
          background-image: linear-gradient(90deg, var(--gradient-color-1), var(--gradient-color-2));
          animation: animated-gradient-title-1 8s infinite;
        }
      }

      &.process-step-2 {
        .process-step-title-overlay {
          background-image: linear-gradient(90deg, var(--gradient-color-2), var(--gradient-color-3));
          animation: animated-gradient-title-2 8s infinite;
        }
      }

      &.process-step-3 {
        .process-step-title-overlay {
          background-image: linear-gradient(90deg, var(--gradient-color-3), var(--gradient-color-1));
          animation: animated-gradient-title-3 8s infinite;
        }
      }
    }
  }

  @keyframes animated-gradient-title-1 {
    0%,
    16.667%,
    100% {
      opacity: 1;
    }

    33.333%,
    83.333% {
      opacity: 0;
    }
  }

  @keyframes animated-gradient-title-2 {
    0%,
    16.667%,
    66.667%,
    100% {
      opacity: 0;
    }

    33.333%,
    50% {
      opacity: 1;
    }
  }

  @keyframes animated-gradient-title-3 {
    0%,
    50%,
    100% {
      opacity: 0;
    }

    66.667%,
    83.333% {
      opacity: 1;
    }
  }
}
